<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
  </style>
</head>

<body>

  <script>
    // 目的: 快速创建div对象   本对象  自带颜色属性  自带添加元素方法  和  设置样式方法
    // var div1 = new DIV(); 
    // console.log(div1.color);

    // div1.appendTo(document.body)

    // div1.css({
    //   color: "red",
    //   heigth: "200px",
    //   background: "blue"
    // })

    function Div(Color) {
      // 默认一个div元素
      this.DOM = document.createElement("div"); //创建的div
      this.Color = Color;
    }

    Div.prototype.appendTo = function (node) { //对象的添加方法  node元素的添加位置
      node.appendChild(this.DOM) //将当前创建的div添加到页面中
      return this
    }
    Div.prototype.css = function (option) { //给div设置样式
      for (var key in option) {
        this.DOM.style[key] = option[key];
      }
      return this
    }
    // -----------创建对象
    // var div1 = new Div()

    // div1.css({ //设置样式功能
    //   width: "200px",
    //   height: "200px",
    //   background: "red"
    // }).appendTo(document.body)


    console.log(window.innerHeight)
    for (var i = 0; i < 100; i++) {
      var div1 = new Div()
      var wid = Math.floor(Math.random() * (200 - 50) + 50);
      var hei = Math.floor(Math.random() * (200 - 50) + 50);
      var rgb = Math.floor(Math.random() * 0xffffff).toString(16); //随机颜色
      var left = Math.floor(Math.random() * window.innerWidth);
      var tops = Math.floor(Math.random() * window.innerHeight);
      console.log(tops)


      div1.appendTo(document.body).css({
        width: wid + "px",
        height: hei + "px",
        background: "#" + rgb,
        "position": "absolute",
        left: left + "px",
        top: tops + "px",
        "borderRadius": "50%"
      })
    }

  </script>
</body>

</html>